<template>
  <nav>
    <div class="w2 quick-nav">
      <div class="total">
        <a href="#">
          <el-image :src="require('../../assets/icon.jpg')" lazy class="total-icon"></el-image>
          <p>首页</p>
        </a>
        <a href="#">
          <el-image :src="require('../../assets/icon.jpg')" lazy class="total-icon"></el-image>
          <p>动态</p>
        </a>
        <a href="#">
          <el-image :src="require('../../assets/icon.jpg')" lazy class="total-icon"></el-image>
          <p>排行榜</p>
        </a>
        <a href="#">
          <el-image :src="require('../../assets/icon.jpg')" lazy class="total-icon"></el-image>
          <p>频道</p>
        </a>
      </div>
      <div class="pindao">
        <div class="pindao-box">
          <div class="box-top">
            <a href="#">
              动画
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              音乐
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              舞蹈
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              知识
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              生活
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              时尚
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              娱乐
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              放映厅
              <span class="new-tag">999+</span>
            </a>
            <a href="#" class="scale-hidden">
              动物圈
              <span class="new-tag">999+</span>
            </a>
            <a href="#" class="scale-hidden">
              单机游戏
              <span class="new-tag">999+</span>
            </a>
          </div>
          <div class="box-bottom">
            <a href="#">
              番剧
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              国创
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              游戏
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              数码
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              鬼畜
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              资讯
              <span class="new-tag">999+</span>
            </a>
            <a href="#">
              影视
              <span class="new-tag">999+</span>
            </a>
            <a href="#" class="scale-hidden">
              搞笑
              <span class="new-tag">999+</span>
            </a>
            <a href="#" class="scale-hidden">
              美食圈
              <span class="new-tag">999+</span>
            </a>
            <a href="#" class="scale-hidden">VLOG</a>
            <a href="#" class="scale-show">更多</a>
          </div>
        </div>
      </div>

      <div class="nav-extra">
        <el-row class="extra-top">
          <el-col :span="7">
            <a href="#">
              <el-image :src="require('../../assets/icon.jpg')" lazy class="extra-icon"></el-image>专栏
            </a>
          </el-col>
          <el-col :span="7">
            <a href="#">
              <el-image :src="require('../../assets/icon.jpg')" lazy class="extra-icon"></el-image>活动
            </a>
          </el-col>
          <el-col :span="10">
            <a href="#">
              <el-image :src="require('../../assets/icon.jpg')" lazy class="extra-icon"></el-image>小黑屋
            </a>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <a href="#">
              <el-image :src="require('../../assets/icon.jpg')" lazy class="extra-icon"></el-image>直播
            </a>
          </el-col>
          <el-col :span="7">
            <a href="#">
              <el-image :src="require('../../assets/icon.jpg')" lazy class="extra-icon"></el-image>课堂
            </a>
          </el-col>
          <el-col :span="10">
            <a href="#">
              <el-image :src="require('../../assets/icon.jpg')" lazy class="extra-icon"></el-image>音乐Plus
            </a>
          </el-col>
        </el-row>
      </div>
    </div>
  </nav>
</template>

<style lang="less" scoped>
nav {
  width: 100%;
  min-width: 999px;
  overflow: hidden;
}
.quick-nav {
  display: flex;
  padding: 20px 0;
}
.total {
  display: flex;
  min-width: 18%;
  height: 60px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.total a {
  flex: 1;
  color: #000;
  font-size: 14px;
  transition: all 0.2s;
}
.total-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.quick-nav a:hover {
  color: #00a1d6;
}
.pindao-box {
  display: flex;
  width: 97%;
  min-width: 97%;
  padding: 0 10px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 50px;
  margin: 0 10px;
  flex-wrap: wrap;
}
.pindao {
  width: 61vw;
  height: 60px;
  min-width: 670px;
}
.pindao a {
  flex: 1;
  color: #000;
  font-size: 14px;
  transition: all 0.2s;
}
.pindao a:hover {
  color: #00a1d6;
}
.new-tag {
  display: inline-block;
  background-color: #73c9e5;
  color: #fff;
  width: 32px;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  transform: scale(0.8);
}
.box-top,
.box-bottom {
  display: flex;
  width: 100%;
}
.box-bottom {
  align-items: flex-end;
}
.nav-extra {
  width: 250px;
  min-width: 200px;
  height: 60px;
}
.nav-extra a {
  display: inline-block;
  color: #000;
  text-align: center;
  font-size: 14px;
}
.extra-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}
.extra-top {
  margin-bottom: 8px;
}
.scale-show {
  display: none;
}
</style>
